<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="{ span: 4 }"
  >
    <a-form-item label="用户名" name="username">
      <a-input v-model:value="formState.username" allow-clear />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input-password v-model:value="formState.password" allow-clear />
    </a-form-item>

    <a-form-item
      label="头像"
      style="display: flex; align-items: center"
      name="avatar"
    >
      <a-upload
        v-model:file-list="formState.avatar"
        name="file"
        list-type="picture-card"
        :show-upload-list="false"
        action="/api/img"
        :before-upload="beforeUpload"
        @change="handleChange"
        :maxCount="1"
      >
        <a-image
            @click.stop
            v-if="imageUrl"
            :width="100"
            :src="imageUrl"
        >
          <template #previewMask>
            <div style="display: flex;justify-content: space-around">
              <EyeOutlined style="font-size: 20px" />
              <DeleteOutlined style="font-size: 20px;margin-left: 10px" @click.stop="delImg"/>
            </div>
          </template>
        </a-image>
        <div v-else>
          <loading-outlined v-if="loading"></loading-outlined>
          <plus-outlined v-else></plus-outlined>
          <div class="ant-upload-text">Upload</div>
        </div>
      </a-upload>
    </a-form-item>


    <a-form-item label="邮箱" name="email">
      <a-input v-model:value="formState.email" allow-clear />
    </a-form-item>
    <a-form-item label="验证码" name="code">
      <a-input-group compact>
        <a-input v-model:value="formState.code" style="width: calc(100% - 200px)" />
        <img @click.stop="getCode" :src="codeObj.imgPath" alt="验证码加载失败" class="code_img"/>
      </a-input-group>
    </a-form-item>
  </a-form>
  <cropper ref="cropperRef"/>
</template>

<script setup>
import { PlusOutlined, LoadingOutlined, EyeOutlined, DeleteOutlined } from "@ant-design/icons-vue";
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import {captcha} from "@/api/user.js";
import Cropper from "@/components/cropper.vue";

const formRef = ref();
const codeObj = reactive({
  imgPath: '',
  imgStr: ''
});
const fileList = ref([]);
const imageUrl = ref("");
const cropperRef = ref()
const loading = ref(false);

const formState = reactive({
  username: "",
  password: "",
  avatar: [],
  email: "",
  code: "",
});
const rules = {
  username: [
    { required: true, message: "请输入用户名哦", trigger: "blur" },
    { min: 2, message: "用户名至少为两位哦", trigger: "blur" },
  ],
  password: [{ required: true, message: "密码必填哦", trigger: "blur" }],
  avatar: [{ required: true, message: "头像必须上传哦", trigger: "change" }],
  email: [
    { required: true, message: "邮箱必填哦", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  code: [{ required: true, message: "验证码必填哦", trigger: "blur" }],
};

const getCode = async () => {
  const {data} = await captcha()
  const { captcha: captchaImg, codeStr } = data
  codeObj.imgPath = captchaImg
  codeObj.imgStr = codeStr
}

getCode()
const delImg = () => {
  imageUrl.value = ''
  formState.avatar = []
}
const beforeUpload = async (file) => {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJpgOrPng) {
    message.error("请上传图片哦");
    return false
  }
  const isLt2M = file.size / 1024 / 1024 < 5;
  if (!isLt2M) {
    message.error("图片不能超过5MB哦");
    return false
  }
  try {
    const data = await cropperRef.value.openUpload(URL.createObjectURL(file))
    return Promise.resolve(data)
  } catch (e) {
    message.error('用户取消上传')
    return false
  }

};
const handleChange = (info) => {
  if (info.file.status === "uploading") {
    loading.value = true;
    return;
  }
  if (info.file.status === "done") {
    imageUrl.value = 'http://localhost:8888' + info.file.response.data.fileName
  }
  if (info.file.status === "error") {
    message.error("图片上传失败");
  }
  loading.value = false;
};
defineExpose({
  formRef,
  codeStr: codeObj
});
</script>

<style lang="scss" scoped>
.code_img {
  margin-left: 20px;
  height: 30px;
}

</style>
